<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <button id="btn1">建立连接</button>
    <button id="btn2">发送消息</button>
    <button id="btn3">断开连接</button>
    <script>
      const btn1 = document.querySelector("#btn1");
      const btn2 = document.querySelector("#btn2");
      const btn3 = document.querySelector("#btn3");
      let ws;
      // 点击建立连接和服务器进行连接
      btn1.onclick = function() {
        // const ws = new WebSocket('服务器地址')  与服务器建立连接
        ws = new WebSocket("wss://echo.websocket.org");
        // 监听是否连接成功,连接成功之后会触发onopen事件
        ws.onopen = function() {
          console.log("与服务器建立连接成功");
        };
        // ws.onmessage 这个方法可以接收到服务器返回给客户端的信息
        ws.onmessage = function(e) {
          // .data就是服务返回给客户端的信息
          console.log(e.data);
        };
        // 和 websocket 断开连接之后可以使用onclose监听连接断开
        ws.onclose = function() {
          console.log("已经断开连接了");
        };
      };
      btn2.onclick = function() {
        // send()方法可以项服务器发送信息
        ws.send("我爱你!!!!!");
      };
      // 点击断开连接按钮断开连接
      btn3.onclick = function() {
        ws.close(); // close()和服务器断开连接
      };

      // 回顾
      // 1.创建连接 const ws = new WebSocket('服务器地址')
      // 2.监听是否连接 ws.onopen = fn
      // 3.发送信息 ws.send('信息')
      // 4.接收服务端返回的信息 onmessage = fn  .data
      // 5.关闭连接 ws.close()
      // 6.监听断开是否成功 ws.onclose = fn
    </script>
  </body>
</html>
